<template>
  <n-layout has-sider position="absolute" class="go-preview-container">
    <div class="sider-container" v-if="menus.length">
      <n-space vertical v-show="showMenus" class="menu-sider">
        <preview-layout-sider
          :menus="menus"
          :active-name="activeName"
          @change="setActivePageData"
        ></preview-layout-sider>
      </n-space>

      <el-icon class="icon-menu" @click="showMenus = !showMenus">
        <Menu></Menu>
      </el-icon>
    </div>
    <el-icon class="icon-refresh" @click="handleRefreshPage" v-if="showRefresh">
      <Refresh></Refresh>
    </el-icon>
    <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" @mousedown="dragCanvas">
      <template v-if="showEntity">
        <!-- 实体区域 -->
        <div ref="entityRef" class="go-preview-entity">
          <!-- 缩放层 -->
          <div ref="previewRef" class="go-preview-scale">
            <!-- 展示层 -->
            <div :style="previewRefStyle" v-if="show">
              <!-- 渲染层 -->
              <preview-render-list></preview-render-list>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <!-- 缩放层 -->
        <div ref="previewRef" class="go-preview-scale">
          <!-- 展示层 -->
          <div :style="previewRefStyle" v-if="show">
            <!-- 渲染层 -->
            <preview-render-list></preview-render-list>
          </div>
        </div>
      </template>
    </div>
  </n-layout>
</template>

<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { PreviewLayoutSider } from './components/PreviewLayoutSider'
import { getFilterStyle, setTitle, refreshPage, fetchRouteQuery } from '@/utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle, dragCanvas } from './utils'
import { useComInstall } from './hooks/useComInstall.hook'
import { useScale } from './hooks/useScale.hook'
import { useStore } from './hooks/useStore.hook'
import { PreviewScaleEnum } from '@/enums/styleEnum'
import type { ChartEditStorageType } from './index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useCloudStore } from '@/store/modules/cloud/index'
import { useDataInit } from './hooks/useData.hook'
import { Menu, Refresh } from '@element-plus/icons-vue'

const { initData, title, menus, activeName, showMenus, setActivePageData } = useDataInit()

// await nextTick(async () => {
initData()
// })

const showRefresh = ref(true)
const query: any = fetchRouteQuery()
if (query.mode === 'pannel') {
  showRefresh.value = false
}

const cloudStore = useCloudStore()
cloudStore.setOperationPassword()

// await getSessionStorageInfo()
let chartEditStore = useChartEditStore() as unknown as ChartEditStorageType

watch(
  activeName,
  () => {
    chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
    useStore(chartEditStore)
  },
  { immediate: true, deep: true }
)

const previewRefStyle = computed(() => {
  return {
    overflow: 'hidden',
    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
    ...getFilterStyle(chartEditStore.editCanvasConfig)
  }
})

const showEntity = computed(() => {
  const type = chartEditStore.editCanvasConfig.previewScaleType
  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
})

const { entityRef, previewRef } = useScale(chartEditStore)
const { show } = useComInstall(chartEditStore)

const handleRefreshPage = () => {
  refreshPage()
}

// 开启键盘监听
keyRecordHandle()
</script>

<style lang="scss" scoped>
.go-preview-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  .sider-container {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    z-index: 9999;
    .icon-menu {
      position: absolute;
      right: -1.8vw;
      top: 0.5vw;
      font-size: 1vw;
      z-index: 1;
      cursor: pointer;
    }
  }
  .icon-refresh {
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    font-size: 1vw;
    z-index: 1;
    cursor: pointer;
  }
}
@include go('preview') {
  position: relative;
  height: 100vh;
  // flex: 1;
  overflow: scroll;
  width: 100%;
  @include background-image('background-image');
  &.fit,
  &.full {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .go-preview-scale {
      transform-origin: center center;
    }
  }
  &.scrollY {
    overflow-x: hidden;
    .go-preview-scale {
      transform-origin: left top;
    }
  }
  &.scrollX {
    overflow-y: hidden;
    .go-preview-scale {
      transform-origin: left top;
    }
  }
  .go-preview-entity {
    overflow: hidden;
  }
}
</style>
<style lang="scss">
.sider-container {
  .go-project-sider-flex {
    .go-project-sider-top {
      margin: 1.5vw 0 1vw;
    }
    .n-menu {
      font-size: 0.8vw !important;
      .n-menu-item {
        margin-top: 0.3vw !important;
        height: 2vw;
        .n-menu-item-content {
          height: 2vw;
          padding: 0 1.1vw 0 1.6vw;
        }
        .n-base-icon {
          font-size: 1vw !important;
        }
      }
    }
  }
}
</style>
